<template >
   <div>
    <div class="item" v-for="(v,i) in obj" :key="i">
        <div class="left" >
            <h4 >{{v.title}}</h4>
            <p>{{v.tags}}</p>
            <span>{{v.category_name}}</span>
        </div>
        <div class="right">
        <img :src="v.image" alt="">
        <span>{{v.price_range}}</span>
        </div>
    </div>
   </div>
</template>
<script>
export default {
  props:["obj"]
}
</script>
<style  scoped>
.item{
    font-size: 0.12rem;
    margin: 0 0.5rem;
    display: flex;
    justify-content:space-between;
    align-items: center;
    height: 1.92rem;
    border-bottom: 0.01rem solid #e3e3e3;
}
.left{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    width: 1.48rem;
    height: 1.4rem;
}
.left p{
    color:gray
}
.right{
    width: 1.16rem;
    height:1.4rem ;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.right img{
    width: 1.16rem;
    height: 1.1rem;
}
</style>